<template>
  <div class="treeItem">
    <div class="left">{{ treeObj.name }}</div>
    <div class="right">
      <div class="r1">{{ treeObj.manager }}</div>
      <div class="r2">
        <el-dropdown @command="commandEvent">
          <span>
            <span>操作</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="add">新增</el-dropdown-item>
              <el-dropdown-item v-if="!isTop" command="edit"
                >编辑</el-dropdown-item
              >
              <el-dropdown-item v-if="!isTop" command="del"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { companyDepartmentDel } from '@/api/departments'
export default {
  props: {
    treeObj: {
      type: Object, // 类型
      required: true, // 是否必须
      default: () => {
        // 返回值
        return {}
      }
    },
    isTop: {
      type: Boolean, // 类型
      default: false
    }
  },
  methods: {
    async commandEvent (str) {
      switch (str) {
        case 'add':
          // this.$message({
          //   type: 'success',
          //   message: '新增'
          // })
          this.$bus.$emit('showDialog', true, this.treeObj)
          break
        case 'edit':
          this.$message({
            type: 'success',
            message: '编辑'
          })
          break
        case 'del':
          try {
            await this.$confirm('您确定要删除此条数据吗?', '删除操作')
            await companyDepartmentDel(this.treeObj.id)
            this.$emit('getData')
          } catch {}
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.treeItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right {
    display: flex;
    .r1 {
      width: 120px;
    }
  }
}
</style>
